<template>
	<view>
		<view class="infoBox">
			<template v-if="loading">
				<view class="infoTitle">
					<view style="height: 30rpx;width: 80%;" class="Skeleton" />
				</view>
				<view class="infoContent">
					<view class="contentItem mb20">
						<view style="height: 30rpx;width: 80%;" class="Skeleton" />
					</view>
					<view class="contentItem">
						<view style="width: 50%;">
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
						</view>
						<view style="width: 50%;">
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="infoTitle">
					<u-icon name='attach' size='28rpx' />
					<view class="title">
						工地信息
					</view>
				</view>
				<view class="infoContent">
					<view class="contentItem mb20">
						开工日期：{{detail.start_at}}
					</view>
					<view class="contentItem">
						<view style="width: 50%;">
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`户型：${detail.layout}`' />
							</view>
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`风格：${detail.style.title}`' />
							</view>
						</view>
						<view style="width: 50%;">
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`面积：${detail.area}`' />
							</view>
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`小区：${detail.district}`' />
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="infoBox" v-if="loading">
			<view class="infoTitle">
				<view style="height: 30rpx;width: 80%;" class="Skeleton" />
			</view>
			<view class="infoContent">
				<view style="display:flex;overflow: auto;">
					<view v-for="(item,index) in [1,2,3,4,5]" :key="index" class="access ">
						<view style="width: 100rpx;height: 100rpx;border-radius:100% ;" class="Skeleton">

						</view>
						<view style="width: 100rpx;height: 20rpx;" class="Skeleton">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="infoBox" v-else>
			<view class="infoTitle">
				<u-icon name='account-fill' size='28rpx' />
				<view class="title">
					服务团队
				</view>
			</view>
			<view class="infoContent">
				<view style="display:flex;overflow: auto;">
					<view v-for="(item,index) in detail.members" :key="index" class="access">
						<u-avatar :src="item.avatar" size='100rpx'></u-avatar>
						<view style="margin-top: 20rpx;height: 40rpx;">
							<u-text lines='1' :text='item.nick_name' size='24rpx'/>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ['detail', 'loading'],
		methods: {
			formatFun(item) {
				let date = new Date(item);
				let options = {
					year: 'numeric',
					month: 'long',
					day: 'numeric'
				};
				let formattedDate = date.toLocaleString('default', options);
				return formattedDate
			},
		}
	}
</script>

<style lang="scss" scoped>
	.infoBox {
		border-radius: 8rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx #eee;
		width: 680rpx;
		margin: 20rpx auto 0;

		.infoTitle {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #ddd;
			padding: 20rpx 40rpx;

			.title {
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.infoContent {
			padding: 20rpx 40rpx;
		}

		.contentItem {
			display: flex;
			width: 100%;
			justify-content: space-between;
		}

		.mb20 {
			margin-bottom: 20rpx;
		}

		.access {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			margin-right: 20rpx;
			text-align: center;
			margin-top: 20rpx;
		}
	}
</style>